﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["Title"] = "湖北省检察院档案管理系统 - 库藏统计";
}

@section Head{
    <link rel="stylesheet" href="~/layuiadmin/style/statistics.css" media="all">
}

@* 统计图表 *@
<div class=" layui-fluid layui-form">
    <div class="layui-tab layui-tab-card" lay-filter="tab-echart">
        <ul class="layui-tab-title layui-Statis1-ul">
            <li class="layui-this" index='1'>
                <span class="title-yck">诉讼统计图表</span>
                <select class="" title="诉讼统计图表">
                    <option value="ss1">案卷卷数年度折线图</option>
                    <option value="ss2">案卷卷数类型柱状图</option>
                    <option value="ss3">案卷册数年度折线图</option>
                    <option value="ss4">案卷册数类型柱状图</option>
                    <option value="ss5">案卷按类型(卷数)分析比例图</option>
                    <option value="ss6">案卷按类型(册数)分析比例图</option>
                    <option value="ss7">案卷按册别分析比例图</option>
                </select>
            </li>
            <li index='2'>
                <span class="title-yck">文书统计图表</span>
                <select class="" title="文书统计图表">
                    <option value="ws1">案卷卷数年度折线图</option>
                    <option value="ws2">案卷卷数类型柱状图</option>
                    <option value="ws3">案卷册数年度折线图</option>
                    <option value="ws4">案卷册数类型柱状图</option>
                    <option value="ws5">案卷按类型(卷数)分析比例图</option>
                    <option value="ws6">案卷按类型(册数)分析比例图</option>
                    <option value="ws7">案卷按册别分析比例图</option>
                </select>
            </li>
            <h3 id="hTitle" class="text-center text-primary">诉讼统计图表 / 案卷卷数年度折线图</h3>

        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show ">
                <div id="ss1" class="echarts1"></div>
                <div id="ss2" class="echarts1"></div>
                <div id="ss3" class="echarts1"></div>
                <div id="ss4" class="echarts1"></div>
                <div id="ss5" class="echarts1"></div>
                <div id="ss6" class="echarts1"></div>
                <div id="ss7" class="echarts1"></div>
            </div>
            <div class="layui-tab-item ">
                <div id="ws1" class="echarts1"></div>
                <div id="ws2" class="echarts1"></div>
                <div id="ws3" class="echarts1"></div>
                <div id="ws4" class="echarts1"></div>
                <div id="ws5" class="echarts1"></div>
                <div id="ws6" class="echarts1"></div>
                <div id="ws7" class="echarts1"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo1">

</script>

@section scripts{
    <script src="~/layuiadmin/lib/statistics/echarts.min.js"></script>
    <script>
        layui.use(['element', 'jquery', 'form', 'table', 'laydate'], function () {
            var element = layui.element, $ = layui.$, form = layui.form, table = layui.table, laydate = layui.laydate;

            var texta;
            element.on('tab(tab-echart)', function (data) {
                if (data.index == 0) {
                    $('#ss1').show();
                    DrawImg1()
                    texta = '诉讼统计图表 / '
                } else if (data.index == 1) {
                    $('#ws1').show();
                    WsDrawImg1()
                    texta = '文书统计图表 / '
                } 
            });


            $('#ss1').show();
            DrawImg1()
            form.on('select()', function (data) {
                $('#hTitle').text(texta + $(this).text())
                $('.echarts1').hide();
                $('.echarts2').hide();
                $('#' + data.value).show();
                if (data.value == 'ss1') {
                    DrawImg1()
                } else if (data.value == 'ss2') {
                    DrawImg2()
                } else if (data.value == 'ss3') {
                    DrawImg3()
                } else if (data.value == 'ss4') {
                    DrawImg4()
                } else if (data.value == 'ss5') {
                    DrawImg5()
                } else if (data.value == 'ss5') {
                    DrawImg5()
                } else if (data.value == 'ss6') {
                    DrawImg6()
                } else if (data.value == 'ss7') {
                    DrawImg7()
                } else if (data.value == 'ws1') {
                    WsDrawImg1()
                } else if (data.value == 'ws2') {
                    WsDrawImg2()
                } else if (data.value == 'ws3') {
                    WsDrawImg3()
                } else if (data.value == 'ws4') {
                    WsDrawImg4()
                } else if (data.value == 'ws5') {
                    WsDrawImg5()
                } else if (data.value == 'ws5') {
                    WsDrawImg5()
                } else if (data.value == 'ws6') {
                    WsDrawImg6()
                } else if (data.value == 'ws7') {
                    WsDrawImg7()
                }
            });

        });



        function DrawImg1() {
            //获取数据
            // var XData = $("#hfXData1").val().split(',');
            // var YData = $("#hfYData1").val().split(',');
            var XData = ['1999', '2000', '2001', '2002', '2003']
            var YData = ['30', '40', '70', '10', '30']

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ss1'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: false
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '卷数',
                        type: 'line',
                        areaStyle: { normal: {} },
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function DrawImg2() {
            //获取数据
            // var XData = $("#hfXData2").val().split(',');
            // var YData = $("#hfYData2").val().split(',');
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ss2'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {},
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%'
                },
                xAxis: [
                    {
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '卷数',
                        type: 'bar',
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function DrawImg3() {
            //获取数据
            var XData = ['1999', '2000', '2001', '2002', '2003']
            var YData = ['30', '40', '70', '10', '30']

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ss3'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: false
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '册数',
                        type: 'line',
                        areaStyle: { normal: {} },
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function DrawImg4() {
            //获取数据
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ss4'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {},
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%'
                },
                xAxis: [
                    {
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '册数',
                        type: 'bar',
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function DrawImg5() {
            //获取数据
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]

            var len = XData.length;
            var Datas = new Array();//创建一个数组
            for (var i = 0; i < len; i++) {
                Datas.push({ value: YData[i], name: XData[i] });
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ss5'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a}< br /> { b } : { c } ({ d } %)"
                },
                series: [
                    {
                        name: '卷数',
                        type: 'pie',
                        radius: '55%',
                        data: Datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function DrawImg6() {
            //获取数据
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]

            var len = XData.length;
            var Datas = new Array();//创建一个数组
            for (var i = 0; i < len; i++) {
                Datas.push({ value: YData[i], name: XData[i] });
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ss6'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a}< br /> { b } : { c } ({ d } %)"
                },
                series: [
                    {
                        name: '册数',
                        type: 'pie',
                        radius: '55%',
                        data: Datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function DrawImg7() {
            //获取数据
            var XData = ['正卷', '副卷']
            var YData = [3000, 6000]

            var len = XData.length;
            var Datas = new Array();//创建一个数组
            for (var i = 0; i < len; i++) {
                Datas.push({ value: YData[i], name: XData[i] });
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ss7'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} < br /> { b } : { c } ({ d } %)"
                },
                series: [
                    {
                        name: '册数',
                        type: 'pie',
                        radius: '55%',
                        data: Datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function WsDrawImg1() {
            //获取数据
            // var XData = $("#hfXData1").val().split(',');
            // var YData = $("#hfYData1").val().split(',');
            var XData = ['1999', '2000', '2001', '2002', '2003']
            var YData = ['30', '40', '70', '10', '30']

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ws1'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: false
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '卷数',
                        type: 'line',
                        areaStyle: { normal: {} },
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function WsDrawImg2() {
            //获取数据
            // var XData = $("#hfXData2").val().split(',');
            // var YData = $("#hfYData2").val().split(',');
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ws2'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {},
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%'
                },
                xAxis: [
                    {
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '卷数',
                        type: 'bar',
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function WsDrawImg3() {
            //获取数据
            var XData = ['1999', '2000', '2001', '2002', '2003']
            var YData = ['30', '40', '70', '10', '30']

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ws3'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: false
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '册数',
                        type: 'line',
                        areaStyle: { normal: {} },
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function WsDrawImg4() {
            //获取数据
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ws4'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {},
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%'
                },
                xAxis: [
                    {
                        data: XData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '册数',
                        type: 'bar',
                        data: YData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function WsDrawImg5() {
            //获取数据
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]

            var len = XData.length;
            var Datas = new Array();//创建一个数组
            for (var i = 0; i < len; i++) {
                Datas.push({ value: YData[i], name: XData[i] });
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ws5'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a}< br /> { b } : { c } ({ d } %)"
                },
                series: [
                    {
                        name: '卷数',
                        type: 'pie',
                        radius: '55%',
                        data: Datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function WsDrawImg6() {
            //获取数据
            var XData = ['永久', '长期', '短期']
            var YData = [3000, 6000, 9000]

            var len = XData.length;
            var Datas = new Array();//创建一个数组
            for (var i = 0; i < len; i++) {
                Datas.push({ value: YData[i], name: XData[i] });
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ws6'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a}< br /> { b } : { c } ({ d } %)"
                },
                series: [
                    {
                        name: '册数',
                        type: 'pie',
                        radius: '55%',
                        data: Datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function WsDrawImg7() {
            //获取数据
            var XData = ['正卷', '副卷']
            var YData = [3000, 6000]

            var len = XData.length;
            var Datas = new Array();//创建一个数组
            for (var i = 0; i < len; i++) {
                Datas.push({ value: YData[i], name: XData[i] });
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ws7'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} < br /> { b } : { c } ({ d } %)"
                },
                series: [
                    {
                        name: '册数',
                        type: 'pie',
                        radius: '55%',
                        data: Datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

    </script>
}
